<template>
  <div class="container p-4">
    <div class="flex flex-col lg:flex-row space-x-4">
      <div class="hidden lg:block w-1/6">
        <PanelMenu :model="items" />
      </div>
      <div class="block lg:hidden mb-2">
        <MegaMenu :model="items" />
      </div>
      <div class="lg:w-5/6 bg-white rounded-md border p-2">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'AdminBasicPage'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import PanelMenu from 'primevue/panelmenu'
import MegaMenu from 'primevue/megamenu'

const items = ref([{
  label: '用户管理',
  icon: 'far fa-fw fa-user',
  to: '/admin/user'
},
{
  label: '资讯管理',
  icon: 'far fa-fw fa-memo',
  to: '/admin/article'
},
{
  label: '字典类别管理',
  icon: 'far fa-fw fa-bookmark',
  to: '/admin/dict_category'
}, {
  label: '字典值管理',
  icon: 'far fa-fw fa-key',
  to: '/admin/dict'
}
])
</script>